<template>
    <div class="tonghang">
        <div class="tong-one">
            <div class="tong-one-q">返回</div>
            <div class="tong-one-qq">同行业PK</div>
            <div class="tong-one-qqq"></div>
        </div>
        <div class="tong-two">
            <div class="tong-two-q">企业名称</div>
            <div class="tong-two-qq">{{ info.a }}</div>
        </div>
        <img src="../../assets/images/pk.png" alt="" class="tong-two-ee">
        <div class="tong-two-w">
            <div class="tong-two-ww">所在行业</div>
            <div class="tong-two-www">{{ info.c }}</div>
        </div>
        <div class="tong-three">请选择目标行业趋势</div>
        <div class="tong-four">
            <div class="tong-four-q tong-four-qq">负债率</div>
            <div class="tong-four-q tong-four-qq">纳税</div>
            <div class="tong-four-q">营收</div>
            <div class="tong-four-q">新设企业</div>
            <div class="tong-four-q">用工</div>
            <div class="tong-four-q">专利</div>
            <div class="tong-four-q">平均生命周期</div>
            <div class="tong-four-q">贷款余额</div>
            <div class="tong-four-q">净利润</div>
            <div class="tong-four-q">涉案</div>
            <div class="tong-four-q">不良贷款</div>
            <div class="tong-four-q">聚焦区域</div>
        </div>
        <div class="tong-five">
            <div class="tong-five-q">开始</div>
            <div class="tong-five-qq">PK</div>
        </div>
    </div>
</template>

<script>
export default {
    name: "",
    /*1. Vue扩展 */
    extends: "", // extends和mixins都扩展逻辑，需要重点放前面
    mixins: [],
    components: {},
    /* 2. Vue数据 */
    props: {},
    model: { prop: "", event: "" }, // model 会使用到 props
    data() {
        return {
            info: {
                a: '南华期货股份有限公司苏州营业部',
                c: '煤炭开采和洗选业',
            },
        };
    },
    computed: {},
    watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
    /* 3. Vue资源 */
    filters: {},
    directives: {},
    /* 4. Vue生命周期 */
    beforeCreate() {
        // console.log(1);
    },
    //  生命周期函数
    created() {
        // console.log(2);
        // console.log(this.uname);
        // let a = [1, '3', 'xiao', 4]
        // this.uname = a[a.length - 1]
        // let c = {
        //     a: 1,
        // }
        // console.log(c.a);
        // console.log(c['a']);
        // c['b'] = 2
        // console.log(c);
    },
    mounted() { },
    destroy() { },
    /* 5. Vue方法 */
    methods: {}
};
</script>
<style scoped lang="scss">
.tonghang {
    height: 100px;

    .tong-one {
        height: 97px;
        display: flex;
        justify-content: space-between;

        .tong-one-q {
            margin: 65px 0 0 18px;
            margin-right: 18px;
            font-size: 18px;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            width: 80px;
            height: 20px;
        }

        .tong-one-qqq {
            margin-right: 18px;
            width: 80px;
            height: 20px;
        }

        .tong-one-qq {
            font-size: 18px;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            color: #000000;
            margin-top: 66px;
        }
    }

    .tong-two {
        margin: 21px 51px 0 51px;
        height: 118px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-image: url('../../assets/images/qiyedi.png');
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        border: 1px solid red;

        .tong-two-q {
            font-size: 19px;
            font-family: Alibaba PuHuiTi;
            font-weight: 500;
            color: #3282E4;
            margin-top: 15px;
        }

        .tong-two-qq {
            font-size: 18px;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            color: #000000;
            margin-top: 8px;
        }
    }

    .tong-two-ee {
        transform: translate(50%);
        height: 61px;
        position: absolute;
        right: 50%;
        top: 218px;
    }

    .tong-two-w {
        margin: 24px 51px 0 51px;
        height: 118px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-image: url('../../assets/images/songzaihang.png');
        background-repeat: no-repeat;
        background-size: cover;
        border: 1px solid red;

        .tong-two-ww {
            font-size: 19px;
            font-family: Alibaba PuHuiTi;
            font-weight: 500;
            color: #EB8A2A;
            margin-top: 37px;
        }

        .tong-two-www {
            font-size: 18px;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            color: #000000;
            margin-top: 9px;
        }
    }

    .tong-three {
        margin: 30px 14px 0 14px;
        height: 45px;
        background-image: url('../../assets/images/huisebeijing.png');
        background-repeat: no-repeat;
        background-size: cover;
        border: 1px solid red;
        text-align: center;
        line-height: 45px;
        font-size: 16px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #000000;
    }

    .tong-four {
        margin: 7px 14px 0 14px;
        display: flex;
        flex-wrap: wrap;

        .tong-four-q {
            width: calc((100% - 28px) / 3);
            text-align: center;
            height: 55px;
            line-height: 55px;
            margin-right: 14px;
            font-size: 15px;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            color: #191919;
            margin-top: 15px;
            border: 1px dashed red;
            position: relative;
        }

        .tong-four-q::before {
            content: '';
            border-radius: 50%;
            position: absolute;
            background-color: red;
            width: 3px;
            height: 3px;
            top: 10px;
            right: 10px;
        }

        .tong-four-q:nth-child(3n) {
            margin-right: 0;
        }

    }

    .tong-five {
        margin: 27px 31px 0 31px;
        display: flex;
        align-items: center;
        height: 38px;
        background: #3282E4;
        border-radius: 4px;
        justify-content: center;

        .tong-five-q {
            font-size: 17px;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            color: #FFFFFF;
            margin-right: 5px;
        }

        .tong-five-qq {
            font-size: 23px;
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            color: #FFFFFF;
        }
    }

    .tong-five:hover {
        // transform: translateY(-10px);
        // transform: scale(0.5);
        transform: rotate(20deg);
    }
}</style>